<script>
import { defineComponent } from 'vue';
import HeaderComponent from '../common/header.vue';
import FooterComponent from '../common/footer.vue';
import axios from "axios";

export default defineComponent({
  name: "ViewOrder",
  components: { HeaderComponent, FooterComponent },
  data() {
    return {
      order: []
    };
  },
  async created(){
    console.log('created');
    const re = await this.fetchData();//promise对象
    console.log(re.data);
    this.order = re.data;
  },
  methods:{
    async fetchData(){
      console.log()
      try{
        axios.defaults.withCredentials = true;
        const response = await axios.get('http://localhost:8090/order/getConfirmOrder');
        return response.data;
      }catch(error){
        console.log(error);
        return 0;
      }
    }
  }
});
</script>

<template>

</template>
<div id = "BackLink">
<a href="/catalog/main">Return to Main Menu</a>
</div>

<div id="Catalog">

<div id="Cart" >

  <h2>Sumbit Order</h2>

  <form action="#" method="post">
    <table>
      <tr>
        <th><b>Item ID</b></th>
        <th><b>Product ID</b></th>
        <th><b>Description</b></th>
        <th><b>In Stock?</b></th>
        <th><b>Quantity</b></th>
        <th><b>List Price</b></th>
        <th><b>Total Cost</b></th>
      </tr>

      <tr v-for="lineItem in order.lineItems" :key="lineItem.item.itemId">
        <td>{{lineItem.item.itemId}}</td>
        <td>{{lineItem.item.product.productId}}</td>
        <td v-if="lineItem.item">
          <b>{{lineItem.item.attribute1}}</b>
          <b>{{lineItem.item.attribute2}}</b>
          <b>{{lineItem.item.attribute3}}</b>
          <b>{{lineItem.item.attribute4}}</b>
          <b>{{lineItem.item.attribute5}}</b>
        </td>
        <td>{{lineItem.quantity}}</td>
        <td>{{lineItem.unitPrice}}</td>
      </tr>
      <tr>
        <th colspan="5">
          Total:
          <!--                                <td th:text="${#numbers.formatDecimal(session.order.totalPrice/100.0,1,2)}">-->
          <td>{{order.totalPrice}}</td>
          <!--                            <fmt:formatNumber th:text="${session.order.totalPrice}" pattern="$#,##0.00" />-->
        </th>
      </tr>
    </table>
  </form>


</div>



<div id="Separator">&nbsp;</div>
</div>
<style scoped>
@import "@/assets/css/submitOrder.css";
</style>